$(function(){
    //声明一个变量记录列表参数
    let q = {
        pagenum:1,//	是	int	页码值
        pagesize:3,//	是	int	每页显示多少条数据
        cate_id:'',//	否	string	文章分类的 Id
        state:''
    }
    //需求1 初始化文章列表
    initArticleList ()
    
    //封装函数渲染文章列表 后续会使用
    function initArticleList () {
        axios({
            url:'/my/article/list',
            method:'get',
            params: q
        }).then(res=>{
            //成功回调
            let {
              data: { status, data, message,total}
            } = res
            if (status != 0) {
              return layui.layer.msg(message)
            }
            let arr = []
            data.forEach(ele => {
                arr.push(`
                     <tr>
                         <td><a list-id="${ele.Id}" id="add-article" href="Javascript:;">${ele.title}</a></td>
                         <td>${ele.cate_name}</td>
                         <td>${initTime (ele.pub_date)}</td>
                         <td>${ele.state}</td>
                         <td>
                           <a href="/article/art_edit.html?id=${ele.Id}" id="gai" class="gai layui-btn layui-btn-normal layui-btn-xs" lay-submit>修改</a>
                           <button id="del" list-id="${ele.Id}" class="del layui-btn layui-btn-danger layui-btn-xs" lay-submit>删除</button>
                         </td>
                     </tr>
                `)
            })
            $('tbody').empty().html(arr.join(''))
            // 调用分页 渲染
            renderPage (total)
        })
    } 

    //需求2 渲染文章分类列表
    initCateList ()
    //封装文章列表
    function initCateList () {
      axios({
        url:'/my/article/cates'
      }).then(res=>{
        //成功回调
        let {data:{status,data,message}} = res
        if(status != 0){
          return layui.layer.msg(message)
        }
        let arr = ['<option value="">请选择文章分类</option>']
        data.forEach(ele => {
          if (ele.Id < 0) return
          arr.push(`<option value=${ele.Id}>${ele.name}</option>`)
        })
        $('[name=cate_id]').empty().html(arr.join(''))
        layui.form.render()
      })
    }

    //需求3 表单注册事件 进行筛选
    $('#formList').on('submit',function(e){
        e.preventDefault()
        // 参数重新赋值做筛选
        q.cate_id = $('[name="cate_id"]').val()
        q.state = $('[name="state"]').val()
        // 调用渲染文章列表
        initArticleList ()
    })

    //需求4 分页
    function renderPage (total){
        //执行一个laypage实例
        layui.laypage.render({
          elem: 'testArt', //注意，这里的 test1 是 ID，不用加 # 号
          count: total ,//数据总数，从服务端得到
          limit:q.pagesize,
          curr:q.pagenum,
          layout:	['count','limit','groups','prev', 'page', 'next','refresh','skip'],
          limits:[2, 3, 5, 10, 15],
          jump: function(obj, first){
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            
            //首次不执行
            if(!first){
              //do something
              q.pagenum = obj.curr
              q.pagesize = obj.limit
              initArticleList ()
            }
          }
        })
    }

    //需求5 删除
    $('tbody').on('click','#del',function(){
      let id = $(this).attr('list-id')
        layer.confirm('是否删除此文章?', {icon: 3, title:'提示'}, function(index){
            //do something
            axios({
                url:'/my/article/delete/'+id
            }).then(res=>{
                //成功回调
                let {data: { status,message}} = res
                if (status != 0) {
                  return layui.layer.msg(message)
                }
                layui.layer.msg('恭喜删除文章成功')
                //当最后一页文章数只有一条时 删除后会出现空白页 
                // 短路运算判断后再渲染
                $('.del').length == 1&&q.pagenum > 1&&q.pagenum--
                // 调用渲染文章列表
                initArticleList ()
            })
            layer.close(index)
          })
    })

    //需求6 附加功能
    $('tbody').on('click','#add-article',function(){
      //获取id
      let id = $(this).attr('list-id')
      //发送ajax 获取文章数据
      axios({
        url:'/my/article/'+id
      }).then(res=>{
        //成功回调
        let {data:{status,data,message}} = res
        if(status != 0){
          return layui.layer.msg(message)
        }
        layer.open({
          type: 1,
          title: '预览文章',
          area: ['85%', '85%'],
          content: `
            <div class="artinfo-box">
              <h1 class="artinfo-title">${data.title}</h1>
              <div class="artinfo-bar">
                <span>作者：${data.author_id}</span>
                <span>发布时间：${initTime (data.pub_date)}</span>
                <span>所属分类：${data.cate_id}</span>
                <span>状态：${data.state}</span>
              </div>
              <hr>
              <img src="http://api-breakingnews-web.itheima.net${data.cover_img}" alt="" class="artinfo-cover">
              <div>${data.content}</div>
            </div>
          `
        })
      })
    })

})